{template header}
<style type="text/css">
    .imgList {margin-top: 10px; clear:both;}
    .userInfo {height: 40px;}
    .userInfo img {max-height: 40px; max-width: 40px;float: left;margin-right: 10px;}
    .userInfo .name {padding-top: 1px;}
    .userInfo button{  float: right; margin-right: 100px;position: relative;bottom: 40px;}
    .imgList {margin-bottom: 10px; clear:both;}
    .alternateImg li {list-style: none;}
    .alternateImg input[type="checkbox"] {margin: auto auto 1px 1px;}
    .alternateImg img.thumbImg {height: 100px;}
    .icon-remove{float: right;margin: 4px;}
</style>
<script src="static/bootstrap/js/utils.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        // 移除待选用户-图片
        $("ul.alternateImg li i").click(function(){
            if(confirm("Are you sure to remove this image?"))
            {
                var uid = $(this).parents(".unitDiv").find("#uid").val();
                var img = $(this).siblings("#sourceImg").val();
                if(removeAlternateList(uid, img))
                {
                    $(this).parents("li.span2").fadeOut(2000);
                }
            }
            return false;
        });
        // 设置为推荐好友
        $("button#addRecommend").click(function(){
            rel = checkSelectImg($(this).parents(".unitDiv"));

            if(rel)
            {
                uid = rel.uid;
                $.ajax({url:"index.php?c=admin&a=setRecFriend",
                    async:false,
                    type:"post",
                    dataType:"json",
                    data:{
                        "uid":rel.uid,
                        "images":rel.imgs,
                    },
                    error:function(){
                            alert('未知错误');
                        },
                    success:function(data, status){
                        res = eval(data);
                        if(res.err == 0)
                        {
                            alert('success');
                        }
                        else
                        {
                            alert(res.msg);
                        }
                    }
                });

            }
            return false;
        });
    }); 
    // 从备选用户-图片列表中移除用户
    function removeAlternateList(uid, img)
    {
        var rel = false;
        $.ajax({url:"index.php?c=admin&a=friendRecAddAlternate",
            async:false,
            dataType:"json",
            data:{
                "selected":0,
                "uid":uid,
                "img":img
            },
            error:function(){
                    alert('未知错误');
                },
            success:function(data, status){
                turnData = eval(data);
                if(turnData.err == 0)
                {
                    rel = true;
                    $("#alert_"+uid).children("span").text('用户ID:'+uid+', 图片：'+img+'移除成功');
                }
            }
        });
        return rel;
    }
    // 检查选择的图片
    function checkSelectImg(ele)
    {
        var rel = new Object(); // 返回数据

        rel.uid = ele.find("#uid").val();
        rel.num = 0;  // 选择的图片数量
        rel.imgs = '';  // 选定的图片

        $("#alterDiv_" + rel.uid + " .imgList ul.alternateImg li input[type='checkbox']").each(function()
        {
            if($(this).prop("checked") == true)
            {
                var img = $(this).siblings("#sourceImg").val();
                if(Utils.isEmpty(rel.imgs))
                {
                    rel.imgs = img;
                }
                else
                {
                    rel.imgs += (',' + img);
                }
                rel.num += 1;
            }
        });
        if(rel.num != 3)
        {
            alert('请选择三个图片！一个也不能少！！ 一个也不能多！！！');
            return false;
        }
        return rel;
    }
</script>
<div class="container-fluid">
    <div class="row-fluid" style="margin-bottom:20px;">
        <div class="span4">
            <a class="btn" type="button" href="index.php?c=admin&a=friendRecList">推荐好友列表</a>
        </div>
    </div>
    {loop $userList $k $v}
    <div class="unitDiv" id="alterDiv_{$v['uid']}">
        <div class="row-fluid">
            <blockquote class="userInfo" id="userInfo_{$v['uid']}">
                <p>
                    <img src="{$v['header']}" alt='用户头像' />
                    <input type="hidden" id="uid" value="{$v['uid']}">
                </p>
                <div class="name">
                    <h4>{$v['nickname']}</h4>
                </div>
                <button class="btn btn-primary" type="submit" id="addRecommend">推荐此人</button>
            </blockquote>
        </div>
        <div class="row-fluid">
            <div class="span12">
                <div class="alert" id="alert_{$v['uid']}">
                     <button type="button" class="close" data-dismiss="alert"></button>
                    <h4>
                        提示!
                    </h4>
                    <span>选择三张图片，点击 推荐此人 就哦了</span>
                </div>
            </div>
        </div>
        <div class="span12 imgList">
            <ul class="alternateImg">
                {loop $v['imgs'] $kk $img}
                <li class="span2">
                    <div class="thumbnail">
                        <div>
                            <input type="checkbox" name="alternateImg" {if $img['status'] == 2}checked="checked" {/if}>
                            <i class="icon-remove">{$img['status']}</i>
                            <input type="hidden" id="sourceImg" value="{$img['sourceImg']}">
                        </div>
                        <div  style="clear:both;"></div>
                        <a href="#alternateImg_{$v['uid']}_{$kk}" data-toggle="modal">
                            <img class="thumbImg" src="{$img['sourceImg']}" />
                        </a>
                        <div id="alternateImg_{$v['uid']}_{$kk}" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                                <h3 id="myModalLabel">大图</h3>
                            </div>
                            <div class="modal-body" style="height:700px;">
                                <img src="{$img['sourceImg']}">
                            </div>
                        </div>
                    </div>
                </li>
                {/loop}
            </ul>
        </div>
    </div>
    {/loop}
</div>
<div class="pagination">
    <ul>
        {$pageStr}
    </ul>
</div>
{template footer}